<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      var addressAy = [
        {
          proId: 'p1',
          proName: '安徽省',
          cityList: [
            { cityId: 'c1', cityName: '合肥' },
            { cityId: 'c2', cityName: '芜湖' },
          ],
        },
        {
          proId: 'p2',
          proName: '江苏省',
          cityList: [
            { cityId: 'c3', cityName: '南京' },
            { cityId: 'c4', cityName: '苏州' },
            { cityId: 'c5', cityName: '常州' },
          ],
        },
        {
          proId: 'p3',
          proName: '浙江省',
          cityList: [
            { cityId: 'c6', cityName: '杭州' },
            { cityId: 'c7', cityName: '嘉兴' },
          ],
        },
      ]
      //显示所有的省份
      function showProList() {}

      //显示当前被选中省份下 所有的城市
      function showCityList() {
        // 被选中索引
        var selectedIdx = document.getElementById('pro').selectedIndex
        console.log('===============被选中的option的索引:' + selectedIdx)
        // 提示：xx数组 ...
      }
    </script>
  </head>
  <body onload="showProList()">
    请选择住址:<select id="pro" onchange="showCityList()">
      <option value="">--请选择省份--</option>
      <option value="">xxx伪省份</option>
    </select>
    <select id="city">
      <option value="">--请选择城市--</option>
    </select>
  </body>
</html>
